<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lazyload</title>
    <style>
        .lazyload {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4"
            data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F17541638%2Ff%2F890904776.jpg&refer=http%3A%2F%2Fphoto.tuchong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=79826fb57a8b6d1880a166beee5f0ef9"
            alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4"
            data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2Fv2-07f2ff011d45c4134cbd74853d57227e_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=4bb357ac845d6785858a194b80d370a9"
            alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4"
            data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp9.itc.cn%2Fq_70%2Fimages03%2F20210819%2F0bd49bafadc14ba5aee541e7f479c153.jpeg&refer=http%3A%2F%2Fp9.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=ce5defa00f639920e08b3e2349dcb5c3"
            alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4"
            data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-4a9b93a7321a12a2bdcea760e1cc8440_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=80938683015043bc4d2b288975181ece"
            alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4"
            data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F274900%2Ff%2F281010382.jpg&refer=http%3A%2F%2Fphoto.tuchong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=e34642424d7ebd8d70802af1e5e99467"
            alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4"
            data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0625%252Fd6721fc8j00qv86gi001dc000hs00buc.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=5dc9b1f32cd5f002e9555f46625f6dbb"
            alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4"
            data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.guancha.cn%2Fnews%2F2021%2F07%2F23%2F20210723162723458jpg&refer=http%3A%2F%2Fi.guancha.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=6001bc61acdaf75f43f16a9ad8eb6fb9"
            alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4"
            data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fimages01%2F20210529%2Fbb24a2351b084f70a2123ef038302510.jpeg&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=71bc96460fd2bf1c8d9022fedb51d6c8"
            alt="">
    </div>
    <script>
        window.addEventListener('DOMContentLoaded', function () {
            let imgList = [...document.querySelectorAll('.lazyload img')];
            // querySelectorAll 出来的伪数组 不能调用普通数组的方法
            // 可以 展开
            let length = imgList.length;
            const imgLazyLoad = (function () {
                // 闭包空间
                // 计数法
                let count = 0;
                return function () {
                    console.log('——————start——————');
                    let deleteIndexList = [];
                    imgList.forEach((img, index) => {
                        // console.log(img, index);
                        let rect = img.getBoundingClientRect();
                        // console.log(rect); 
                        if (rect.top < window.innerHeight) {
                            img.src = img.dataset.src;
                            // 已经加载的，img 从 imgList 移除
                            deleteIndexList.push(index);
                            count++;
                            if (count == length) {
                                console.log('_____over_____');
                                document.removeEventListener('scroll', imgLazyLoad);
                            }
                        }
                    })
                    // deleteIndexList 收集了本次 srcoll 要移除的 img index arr
                    // console.log(deleteIndexList);
                    imgList = imgList.filter(
                        (img, index) => !deleteIndexList.includes(index)
                    )
                    console.log(imgList);
                }
            })();
            // imgList.forEach((img, index) => {
            //     // console.log(img, index);
            //     let rect = img.getBoundingClientRect();
            //     // console.log(rect); 
            //     if (rect.top < window.innerHeight) {
            //         img.src = img.dataset.src;
            //     }

            // 每滚动 检测所有图片
            // 图片是否处于可视区
            // 是 ———— 把data-src改成src
            // 否 ———— 不加载
            imgLazyLoad();// 首屏加载
            document.addEventListener('scroll', imgLazyLoad);
        })
    </script>
</body>

</html>